import { btnsModule } from '@renderer/utils/bundle'
import useMainStore from '@renderer/store/modules/useMainStore'
import { useWindowSize } from '@vueuse/core'
import * as PIXI from 'pixi.js'
import param from '../param'
import { diyNFileClick, clickDataExport, clickDiyDownload, clickDataImport, clickDiyReset, clickDiyMore /*, clickDiySave*/ } from '@renderer/utils/events'
import { setPixiData } from '@renderer/store/modules/usePixiStore'
import { createEf, Ef } from '@renderer/utils/ef'
import { addDiyCard } from '@renderer/views/Card'
const { width, height } = useWindowSize()

const btnsContainer = new PIXI.Container()
const mainStore = useMainStore()

// TODO 考虑合适的设计模式
const clickDiySave = (): Ef => {
  return createEf(
    () => {
      addDiyCard()
    },
    { type: 'click', peimi: true },
  )
}
// 创建一个按钮
const createBtn = async (name: string): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  const { scale } = mainStore.getAppAttr
  const container = new PIXI.Container()
  const sprite = await btnsModule('red')
  sprite.anchor.set(0.5)
  container.scale.set(0.6)
  container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
  container.addChild(sprite)
  const text = new PIXI.Text({
    text: name,
    alpha: 0.8,
    style: {
      fontFamily: 'XQFont',
      fontSize: 52,
      fill: 0x222222,
      align: 'center',
    },
  })
  text.anchor.set(0.5)
  container.addChild(text)
  btnsContainer.addChild(container)
  return container
}
let leftWidth = 0 // 左侧宽度
const rowNum = 3 // 每行按钮数量
let btnCount = 0 // 按钮计量
// 设置空间占用
const setSpaceUsage = (container: PIXI.Container<PIXI.ContainerChild>): void => {
  if (btnCount === 0) {
    leftWidth = container.width / 2 // 设置整体的左侧宽度保证对齐
  }
  const line = btnCount % rowNum // 第几列
  const row = Math.floor(btnCount / rowNum) // 第几行
  container.position.set(container.width * 1.1 * line, container.height / 2 + container.height * 1.3 * row)
  btnCount++
}
export default async (): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  // 选择图片
  {
    const container = await createBtn('选择图片')
    setSpaceUsage(container)
    setPixiData(container.uid, {
      accept: 'image/*',
    })
    diyNFileClick.whiteAdd(container)
  }
  // 卡牌下载
  {
    const container = await createBtn('卡牌下载')
    setSpaceUsage(container)
    clickDiyDownload.whiteAdd(container)
  }
  // 卡牌保存
  {
    const container = await createBtn('卡牌保存')
    setSpaceUsage(container)
    clickDiySave().whiteAdd(container)
  }
  // 数据导入
  {
    const container = await createBtn('数据导入')
    setSpaceUsage(container)
    clickDataImport.whiteAdd(container)
  }
  // 数据导出
  {
    const container = await createBtn('数据导出')
    setSpaceUsage(container)
    clickDataExport.whiteAdd(container)
  }
  // 数据重置
  {
    const container = await createBtn('数据重置')
    setSpaceUsage(container)
    clickDiyReset.whiteAdd(container)
  }
  // 更多功能
  {
    const container = await createBtn('更多功能')
    setSpaceUsage(container)
    clickDiyMore.whiteAdd(container)
  }
  btnsContainer.position.set(leftWidth, param.value.startHeight + param.value.leftUsageHeight)
  return btnsContainer
}
